<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body>div{
				display: flex;
			}
			.box{
				width: 300px;
				margin:0 20px;
			}
			.max-box{
				background-color: red;
				
				width: 300px;
				height: 300px;
				display: flex;
				align-items: center;
			}
			.min-box{
				background-color: green;
				margin:0 auto;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<button id="btn1">按钮一</button>
		<button onclick="showTitle()">按钮二</button>
		<div>
			<div class="box">
				<h3>mouseover/mouseout</h3>
				<div id="abox" class="max-box">
					<div class="min-box"></div>
				</div>
				<h3>移入移出次数：<span id="anum"></span></h3>
			</div>
			
			<div class="box">
				<h3>mouseenter/mouseleave</h3>
				<div id="bbox" class="max-box">
					<div class="min-box"></div>
				</div>
				<h3>进入离开次数：<span id="bnum"></span></h3>
			</div>
		</div>
		
		
		
		
		<script src="js/jquery.3.6.3.js"></script>
		<script>
			
			function showTitle(){
				alert("点击了按钮二");
			}
			//鼠标点击事件
			$("#btn1").click(function(){
				alert("点击了按钮一")
			})
			
			let anum = 0,bnum = 0;
			//移入移出事件
			$("#abox").mouseover(function(){
				anum++;
				//鼠标移入做的事情
				$("#abox>.min-box").css("background-color","black");
				$("#anum").html(anum);
			}).mouseout(function(){
				//鼠标移出做的事情
				$("#abox>.min-box").css("background-color","green");
			})
			
			//进入离开事件
			$("#bbox").mouseenter(function(){
				bnum++;
				//鼠标进入做的事情
				$("#bbox>.min-box").css("background-color","black");
				$("#bnum").html(bnum);
			}).mouseleave(function(){
				//鼠标离开做的事情
				$("#bbox>.min-box").css("background-color","green");
			})
			
		</script>
	</body>
</html>
